<template>
  <div class="box">
    <div class="text">
      <span>基础分配</span>
    </div>
    <div class="box1">
      <div class="radio1">
        <el-radio v-model="radio" label=""></el-radio>
      </div>
      <div class="text1">
        <span>按排序轮流分配</span>
      </div>
      <div class="text2">
        <span
          >设定一个客服排序，新的对话按此排序，在可分配的客服间轮流分配，从排序最靠前的开始</span
        >
      </div>
      <div class="fgline">
        <el-divider></el-divider>
      </div>
      <div class="radio2">
        <el-radio v-model="radio1" label=""></el-radio>
      </div>
      <div class="text3">
        <span>按排序优先分配</span>
      </div>
      <div class="text4">
        <span
          >设定一个客服排序，优先给排序靠前的客服分配到对话数量上限，才会分配给排序下一位的客服</span
        >
      </div>
      <div class="fgline1">
        <el-divider></el-divider>
      </div>
      <div class="radio3">
        <el-radio v-model="radio2" label=""></el-radio>
      </div>
      <div class="text5">
        <span>按平均分配</span>
      </div>
      <div class="text6">
        <span>根据每位客服的对话数量维持一个平均的工作量分配</span>
      </div>
    </div>
    <div class="text7">
      <span>回头客分配</span>
    </div>
    <div class="switch1">
      <el-switch v-model="value1" active-text="开启" inactive-text="关闭">
      </el-switch>
    </div>
    <div class="text8">
      <span>优先把回头客分配给上一次和他对话的客服</span>
    </div>
    <div class="fgline2">
      <el-divider></el-divider>
    </div>
    <div class="text9">
      <span>客户排队超时优先</span>
    </div>
    <div class="switch2">
      <el-switch v-model="value2" active-text="开启" inactive-text="关闭">
      </el-switch>
    </div>
    <div class="text10">
      <span>客户发起咨询排队时，如排队等待超过设置的时间，系统将优先接入</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "0",
      radio1: "1",
      radio2: "1",
      activeName: "first",
      value1: true,
      value2: true
    };
  },
};
</script>

<style scoped>
.box {
  width: 1040px;
  height: 448px;
  background-color: #ffffff;
}
.text {
  width: 72px;
  height: 24px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 20px;
  left: 17px;
}
.box1 {
  width: 1002px;
  height: 192px;
  background-color:#ffffff00;

  position: relative;
  top: 28px;
  left: 17px;
}
.radio1 {
  width: 16px;
  height: 16px;

  position: relative;
  top: 24px;
  left: 17px;
}
.text1 {
  width: 98px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -5px;
  left: 50px;
}
.text2 {
  width: 520px;
  height: 17px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -2px;
  left: 50px;
}
.fgline {
  position: relative;
  top: -8px;
}
.radio2 {
  width: 16px;
  height: 16px;

  position: relative;
  top: -12px;
  left: 17px;
}
.text3 {
  width: 98px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -40px;
  left: 50px;
}
.text4 {
  width: 550px;
  height: 17px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -37px;
  left: 50px;
}
.fgline1 {
  position: relative;
  top: -48px;
}
.radio3 {
  width: 16px;
  height: 16px;

  position: relative;
  top: -54px;
  left: 17px;
}
.text5 {
  width: 70px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -82px;
  left: 50px;
}
.text6 {
  width: 300px;
  height: 17px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -80px;
  left: 50px;
}
.text7 {
  width: 70px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 55px;
  left: 17px;
}
.switch1 {
  position: relative;
  top: 36px;
  left: 120px;
}
.text8 {
  width: 247px;
  height: 17px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 45px;
  left: 17px;
}
.fgline2{
  position: relative;
  top: 50px;
  left: 17px;
}
.text9 {
  width: 112px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 55px;
  left: 17px;
}
.switch2 {
  position: relative;
  top: 36px;
  left: 165px;
}
.text10 {
  width: 390px;
  height: 17px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 40px;
  left: 17px;
}
</style>